<template>
  <el-table :data="userList" style="width: 100%" :cell-style="{ padding: '5px 0' }">
    <el-table-column prop="id" label="序号" align="center"> </el-table-column>
    <el-table-column prop="email" label="邮箱" align="center"> </el-table-column>
    <el-table-column prop="phone" label="联系电话" align="center"> </el-table-column>
    <el-table-column prop="username" label="用户名" align="center"> </el-table-column>
    <el-table-column prop="permission_group_title" label="权限组名称" align="center"> </el-table-column>
    <el-table-column prop="role" label="角色" align="center"> </el-table-column>
    <el-table-column label="操作" width="500px" align="center">
      <template slot-scope="scope">
        <el-button @click="$emit('openEdit', scope.row)" type="text" class="el-button el-button--primary el-button--medium is-plain is-circle"><i class="el-icon-edit"></i></el-button>
        <el-button @click="delUser(scope.row)" v-if="scope.row.id != 2" type="text" class="el-button el-button--danger el-button--medium is-plain is-circle"><i class="el-icon-delete"></i></el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
import { remove } from '@/api/base/users'
export default {
  name: 'userTable',
  props: {
    userList: {
      type: Array,
      require: true
    },
    value: {
      type: Number,
      require: true
    }
  },
  methods: {
    async delUser(val) {
      try {
        await this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        await remove(val)
        // 在拉列表之前 判断一下不是第一页 且是当前页的最后一条数据 是的话页码数需要-1再拉列表
        if (this.value != 1 && this.userList.length == 1) {
          this.$emit('input')
        }
        this.$emit('updateList')
        this.$message.success('删除成功')
      } catch (error) {
        this.$message.info('取消删除')
      }
    }
  }
}
</script>

<style scope lang="less"></style>
